<template>
  <view class="home-container">
    <!-- 天气预报组件 -->
    <Weather></Weather>
    <!-- 轮播图 -->
    <view class="uni-margin-wrap">
      <swiper class="swiper-box" circular indicator-dots="true" autoplay="true" duration="100">
        <swiper-item v-for="i in 4" :key="i">
          <view class="swiper-item uni-bg-red">
            <img :src="`../../static/image/swiper/swiper${i + 1}.png`" />
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 功能小组件 -->
    <view class="myThumb">
      <MyThumb index="1" name="讨论区" url="/subpackage/forum/forum"></MyThumb>
      <MyThumb index="2" name="研讨室预约" url="/pages/reservation/reservation"></MyThumb>
      <MyThumb index="3" name="馆藏查阅" url="/subpackage/book-search/book-search"></MyThumb>
      <MyThumb index="4" name="积分兑换" url="/subpackage/credits/exchange"></MyThumb>
    </view>

    <!-- 公告栏 -->
    <view class="bulletinBoard-container">
      <!-- 标题 -->
      <view class="bulletinBoard-title">
        <view class="bulletinBoard-new">最新通知</view>
        <view class="bulletinBoard-more" @click="goToMore">
          更多
          <text class="more-arrow-right">></text>
        </view>
      </view>
      <!-- 列表内容 -->
      <view class="bulletinBoard-list">
        <block v-for="item in bulletinList" :key="item.id">
          <bulletinBoard-list-item :bulletin="item"></bulletinBoard-list-item>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
import '@/style/home/swiperItem.scss'
import { getBulletinListAsync } from '@/api/bulletin';

// import Weather from '@/components/Weather/weather.vue';
import Weather from '@/components/weather/weather';
const defaultThumbList = ['讨论区', '预约研讨室', '馆藏查阅', '积分兑换']
export default {
  data () {
    return {
      interval: 2000,
      thumbList: defaultThumbList,
      swiperList: [],
      bulletinList: []
    }
  },
  components: {
    Weather
  },
  onLoad () {
    this.getList()

  },
  methods: {
    // 跳转到更多通知页面
    goToMore () {
      uni.navigateTo({
        url: '/subpackage/bulletinBoard-list/bulletinBoard-list',
      })
    },

    async getList () {
      try {
        const res = await getBulletinListAsync()
        this.bulletinList = res.data.data
        console.log('%c [  ]-42', 'font-size:13px; background:pink; color:#bf2c9f;', res)
      } catch (error) {
        console.log('%c [  ]-42', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.home-container {
  padding-bottom: 50rpx;

  // 轮播图
  .uni-margin-wrap {
    .swiper-box {
      box-sizing: border-box;

      swiper-item {
        .swiper-item {
          img {
            object-fit: cover;
            width: 100%;
            height: 350rpx;
          }
        }
      }
    }
  }

  /* 公告栏 */
  .bulletinBoard-container {
    height: 540rpx;
    background: white;
    overflow: hidden;
    margin: 0 20rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;
    box-shadow: 4rpx 4rpx 2rpx 2rpx gray;

    /* 标题 */
    .bulletinBoard-title {
      display: flex;
      justify-content: space-between;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 36rpx;
      color: #fff;
      background-color: #81aecd;
      padding: 0 10rpx;

      .bulletinBoard-new {
        margin-left: 40rpx;
        position: relative;

        /* 通知前面的小竖杠 */
        &::before {
          position: absolute;
          top: 22rpx;
          left: -20rpx;
          content: ' ';
          width: 5rpx;
          height: 40rpx;
          background-color: #fff;
          border-radius: 10rpx;
        }
      }

      .bulletinBoard-more {
        font-size: 20rpx;
        color: #fff;
        padding-right: 20rpx;

        .more-arrow-right {
          margin-left: 5rpx;
        }
      }
    }

    /* 列表内容 */
    .bulletinBoard-list {
      padding: 20rpx 30rpx;
    }
  }

  /* 功能小组件 */
  .myThumb {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    margin: 10rpx 20rpx;
    padding: 10rpx 0;
    border-radius: 10rpx;
    box-shadow: 6rpx 6rpx 10rpx 2rpx gray;
  }
}
</style>
